<script setup lang='ts'>
import { onMounted, reactive, ref, toRaw } from 'vue';
import { adminApi, roleApi  } from '@/api/controller';
import Pagination from '@/components/Pagination/index.vue';
import adminform from './components/adminform.vue';
import { ElMessageBox } from 'element-plus';
import { ToastSuccess, Toastloading } from '@/utils/public';
import table2excel from 'js-table2excel';
const adminformRef = ref();
const listQuery = reactive({
  page: 1,
  limit: 10,
  sort: "+id",
  is_del: ''
})
const datas = reactive({
  listLoading: false,
  downloadLoading: false,
  total: 0,
  list: [],
  roles: [] as any[]
})
const deloptios: Array<any> = [{
  type: '',
  text: '全部状态'
}, {
  type: 0,
  text: '已生效'
}, {
  type: 1,
  text: '未生效'
}];
const filtersRole = (list = []) => {
  if (datas.roles.length == 0 || list.length == 0) return ''
  if (!Array.isArray(list)) return ''
  let ids = list.map((res: any) => { return res.id })
  let text = [] as any[];
  for (let item of datas.roles) {
    if (ids.indexOf(item.id) > -1) {
      text.push(item.desc)
    }
  }
  return text.toString()
}
const handelSearch = () => {
  listQuery.page = 1
  datas.list = []
  getList()
};
const getList = () => {
  const loading = Toastloading();
  adminApi.getAdmins(listQuery).then((response) => {
    const { data, total } = response.data;
    datas.list = data;
    datas.total = total;
    loading.close();
  })
    .catch((err) => {
      loading.close();
    });
};
const getRolesList = () => {
  datas.listLoading = true
  roleApi.getRoles().then((response) => {
    datas.roles = response.data;
    datas.listLoading = false
  }).catch(() => { datas.listLoading = false })
}
const handelAdminForm = (row = {}) => {
  adminformRef.value.openDialog({
    ...row,
    roleslist: datas.roles
  })
};

const handleDownload = () => {
  const tHeader = [{
    title: 'ID',
    key: "id",
    type: "text"
  }, {
    title: '帐号',
    key: "name",
    type: "text"
  }, {
    title: '角色',
    key: "roles",
    type: "text"
  }, {
    title: '是否生效',
    key: "is_del",
    type: "text"
  }, {
    title: '更新时间',
    key: "updated_at",
    type: "text"
  }]
  const list = datas.list.map((res: any) => {
    res.is_del = res.is_del ? '未生效' : '已生效'
    res.roles = filtersRole(res.roles)
    return res
  })
  table2excel(tHeader, list, '管理员')
};
const handleDelete = (row: { id: any; }) => {
  ElMessageBox.confirm('是否确认注销该用户', '提示',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const loading = Toastloading();
    adminApi.deleteAdmin(row.id).then(() => {
      ToastSuccess('注销成功!');
      getList();
      loading.close();
    }).catch(() => {
      loading.close();
    });
  }).catch(()=>{})
}
onMounted(() => {
  getRolesList();
  getList();
})
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">是否生效：</div>
          <el-select v-model="listQuery.is_del" placeholder="请选择" @change="handelSearch">
            <el-option v-for="item in deloptios" :key="item.type" :label="item.text" :value="item.type">
            </el-option>
          </el-select>
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handelAdminForm()">新增</el-button>
          <el-button
            :loading="datas.downloadLoading"
            type="warning"
            @click="handleDownload"
          >导出列表</el-button>
        </div>
      </div>
    </div>
    <el-table class="xm-main xm-TableCenter" :data="datas.list" border style="width:100%;">
      <el-table-column prop="id" sortable="custom" label="ID" />
      <el-table-column min-width="100" prop="name" label="账号" />
      <el-table-column min-width="200" prop="roles" label="角色">
        <template #default="scope">
          {{ filtersRole(scope.row.roles) }}
        </template>
      </el-table-column>
      <el-table-column prop="roles" label="是否生效">
        <template #default="scope">{{ scope.row.is_del ? '未生效' : '已生效' }}</template>
      </el-table-column>
      <el-table-column prop="updated_at" width="200" label="更新时间" />
      <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="primary" @click="handelAdminForm(scope.row)">编辑</el-button>
          <el-button v-if="!scope.row.is_del" type="danger" @click="handleDelete(scope.row)">注销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="datas.total > 0" :total="datas.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <adminform ref="adminformRef" @updateList="getList" />
  </div>
</template>

<style lang='scss' scoped></style>